
<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Range',
        remark: '可比较值的大小的一对表单',
        extends: [form, input],
        attrs: [form.attrs.find(v => v.name == 'label'),
        {
          name: 'mode',
          type: 'String',
          remark: '比较方式',
          option: `<var><=</var><var><</var><var>>=</var><var>>=</var><var>==</var>`,
          default: '<='
        }, {
          name: 'required',
          type: 'Boolean',
          remark: '是否必填项。本参数只用于在Label上显示 <span style="color:red;font-family:tahoma">*</span> 号，具体验证效果请在Range里面的表单上设置',
          option: ''
        }, ],
        slots: [{
          name: 'default',
          remark: '放两个表单组件',
          option: '表单组件'
        }],
        examples: [{
          remark: '日期范围',
          type: 'html',
          view: true,
          code: `
            <w-range :label="{text:'日期范围'}" input-width="*">
              <w-datepicker name="date1" format="yyyy-MM-dd"></w-datepicker>
              <w-datepicker name="date2" format="yyyy-MM-dd"></w-datepicker>
            </w-range>
            `
        }, {
          remark: '数字范围',
          type: 'html',
          view: true,
          code: `
            <w-range :label="{text:'数字范围'}" input-width="*">
              <w-spinner name="spinner1"></w-spinner>
              <w-spinner name="spinner2"></w-spinner>
            </w-range>
            `
        }]
      }
    }
  }
</script>

<style>
</style>
